<template>
    <div style="height: 80%; width: 18%; background-color: #FFFFFF">
        <!--<table1 ref="mytable" :visible1="visi2"  id1="10001" ></table1>-->
        <div style="padding: 10px; border-bottom: 1px solid lightgrey">
            数据
            <el-button style="float: right; border: 1px; padding: 5px 10px"
                       @click="saveLayerInfo">保存
            </el-button>
        </div>
        <div style="overflow: auto; width:100%; height:90%; margin: 10px 0px">
            <div style="margin: 10px 0px; text-align:center;">
                <el-button style="width: 90%; border: 0px" @click="addLayer">添加数据 +</el-button>
            </div>
            <el-form ref="layerInfo" :model="layerInfo">
                <el-form-item v-for="(item, index) in layerInfo.data"
                              :key=index
                              style="margin: 5px 0px;">
                    <!--<el-button style="width: 90%;" @click="showStyle(index)">{{item.layerName}}</el-button>-->
                    <div @click.self="showStyle(index)"
                         style="width: 90%; border: 1px solid #c4c4c4; border-radius: 4px; margin: 0px auto; cursor:pointer">
                        <el-switch style="margin-left: 8px;" v-model="item.ifShow"
                                   @change="layerIfShow(item)"></el-switch>
                        <label style="width: 50px" @click.stop="showStyle(index)">{{item.layerName}}</label>
                        <i class="el-icon-delete icon" style="margin-right: 8px;" @click.stop="deleteLayer(item)"></i>
                        <i class="el-icon-aim icon" @click.stop="fitArea(item)"></i>
                        <i class="el-icon-caret-bottom icon" @click.stop="downClass(item)"
                           v-if="index!==layerInfo.data.length-1"></i>
                        <i class="el-icon-caret-top icon" @click.stop="upClass(item)" v-if="index!==0"></i>
                        <i class="el-icon-document icon" @click.stop="showAttibute(item)"></i>
                        <i class="el-icon-s-data icon" @click.stop="showMapata(item)"></i>
                    </div>
                    <el-collapse-transition>
                        <div v-show="item.styleShow && item.layerType!=='raster'"
                             style="width: 90%; margin: 0px auto; border: 1px solid #c4c4c4; border-radius: 4px; text-align: left;">
                            <div style="margin-bottom: 10px">
                                <el-radio v-model="radio" label="singleColor" style="padding-left: 10px">单色渲染</el-radio>
                                <el-radio v-model="radio" label="subsection" style="padding-left: 10px">分段渲染</el-radio>
                                <el-radio v-model="radio" label="singleValue" style="padding-left: 10px">单值渲染</el-radio>
                                <el-row v-show="item.layerType==='polygon'">
                                    <el-row>
                                        <span class="qian">符号</span>
                                    </el-row>
                                    <el-row v-show="radio==='singleColor'">
                                        <el-col :span="10">
                                            <span class="biao">符号颜色</span>
                                        </el-col>
                                        <el-col :span="13">
                                            <el-color-picker v-model="item.layerStyle.fillColor"
                                                             show-alpha
                                                             @change="changeFillColor(item)"></el-color-picker>
                                        </el-col>
                                    </el-row>
                                </el-row>

                                <el-row v-show="item.layerType==='line'">
                                    <el-row>
                                        <span class="qian">线条</span>
                                    </el-row>
                                    <el-row v-show="radio==='singleColor'">
                                        <el-col :span="10">
                                            <span class="biao">线条颜色</span>
                                        </el-col>
                                        <el-col :span="13">
                                            <el-color-picker v-model="item.layerStyle.lineColor"
                                                             show-alpha
                                                             @change="changeLineColor(item)"></el-color-picker>
                                        </el-col>
                                    </el-row>
                                </el-row>

                                <el-row v-show="item.layerType==='point'">
                                    <el-row>
                                        <span class="qian">符号</span>
                                    </el-row>
                                    <el-row v-show="radio==='singleColor'">
                                        <el-col :span="10">
                                            <span class="biao">符号颜色</span>
                                        </el-col>
                                        <el-col :span="13">
                                            <el-color-picker v-model="item.layerStyle.circleColor"
                                                             show-alpha
                                                             @change="changePointColor(item)"></el-color-picker>
                                        </el-col>
                                    </el-row>
                                </el-row>

                                <el-row v-show="radio==='subsection'">
                                    <el-col :span="10">
                                        <span class="biao">选择属性</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-select v-model="item.field" placeholder="请选择"
                                                   @change="chooseAttr(index,item.layerId, item.field)">
                                            <el-option
                                                    v-for="item2 in item.fields.fields"
                                                    v-if="item2.type!=='string'"
                                                    :key="item2.name"
                                                    :label="item2.name"
                                                    :value="item2.name">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row v-show="radio==='subsection'">
                                    <el-col :span="10">
                                        <span class="biao">分段数量</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-slider v-model="item.layerStyle.classNum"
                                                   @change="reRender(item)"
                                                   :max="10"></el-slider>
                                    </el-col>
                                </el-row>
                                <el-row v-show="radio==='subsection'">
                                    <el-col :span="10">
                                        <span class="biao">符号颜色</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-select v-model="item.layerStyle.colormap" placeholder="请选择"
                                                   @change="reRender(item)">
                                            <el-option
                                                    v-for="item2 in colormap"
                                                    :key="item2.name"
                                                    :label="item2.name"
                                                    :value="item2.name">
                                                    <span> <img :src="item2.imglink" width="200px"
                                                                height="5px"/> </span>
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>

                                <el-row v-show="radio==='singleValue'">
                                    <el-col :span="10">
                                        <span class="biao">单值属性</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-select v-model="item.field2" placeholder="请选择"
                                                   @change="chooseAttr(index,item.layerId, item.field2)">
                                            <el-option
                                                    v-for="item2 in item.fields.fields"
                                                    :key="item2.name"
                                                    :label="item2.name"
                                                    :value="item2.name">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row v-show="radio==='singleValue'">
                                    <el-col :span="10">
                                        <span class="biao">颜色样式</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-select v-model="item.layerStyle.colormap2" placeholder="请选择"
                                                   @change="reRenderSingle(item)">
                                            <el-option
                                                    v-for="item2 in colormap2"
                                                    :key="item2.name"
                                                    :label="item2.name"
                                                    :value="item2.name">
                                                    <span> <img :src="item2.imglink" width="200px"
                                                                height="5px"/> </span>
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>

                                <el-row v-show="radio==='subsection'||radio==='singleValue'">
                                    <el-col :span="10">
                                        <span class="biao">符号透明度</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-slider v-model="item.layerStyle.fillOpacity"
                                                   @change="changeFillOpacity(item)"></el-slider>
                                    </el-col>
                                </el-row>

                                <el-row v-show="item.layerType==='polygon'">
                                    <el-col :span="10">
                                        <span class="biao">轮廓颜色</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-color-picker v-model="item.layerStyle.outlineColor"
                                                         show-alpha
                                                         @change="changeOutlineColor(item)"></el-color-picker>
                                    </el-col>
                                </el-row>

                                <el-row v-show="item.layerType==='line'">
                                    <el-col :span="10">
                                        <span class="biao">线条宽度</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-slider v-model="item.layerStyle.lineWidth"
                                                   :max="10"
                                                   @change="changeLineWidth(item)"></el-slider>
                                    </el-col>
                                </el-row>

                                <el-row v-show="item.layerType==='point'">
                                    <el-col :span="10">
                                        <span class="biao">符号半径</span>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-slider v-model="item.layerStyle.circleRadius"
                                                   :max="10"
                                                   @change="changePointRadius(item)"></el-slider>
                                    </el-col>
                                </el-row>

                                <el-row v-show="item.layerType!=='raster'">
                                    <el-row v-show="item.layerType!=='raster'">
                                        <span class="qian">图例</span>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <span class="biao">显示图例</span>
                                        </el-col>
                                        <el-col :span="13">
                                            <el-switch v-model="item.layerStyle.legendShow"
                                                       @change="legendIfShow(item)"></el-switch>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <span class="biao">图例名称</span>
                                        </el-col>
                                        <el-col :span="13">
                                            <el-input v-model="item.layerStyle.legendName"
                                                      @change="changeLegendName(item)"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-row>
                            </div>
                        </div>
                    </el-collapse-transition>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
    import global from "../global.vue";
    import util from '../../common/js/util'
    import * as d3 from "../../../node_modules/d3/dist/d3.js";
    import {requestSearchField} from '../../api/msfield';
    import {requestUpdate} from "../../api/mapservice";

    export default {
        data() {
            return {
                colormap: [
                    {
                        name: "Reds",
                        imglink: "/static/colormap/Reds.png"
                    }, {
                        name: "Oranges",
                        imglink: "/static/colormap/Oranges.png"
                    }, {
                        name: "Greens",
                        imglink: "/static/colormap/Greens.png"
                    }, {
                        name: "Blues",
                        imglink: "/static/colormap/Blues.png"
                    }, {
                        name: "Purples",
                        imglink: "/static/colormap/Purples.png"
                    }, {
                        name: "Greys",
                        imglink: "/static/colormap/Greys.png"
                    }
                ],
                colormap2: [
                    {
                        name: "Pastel1",
                        imglink: "/static/colormap/Pastel1.png"
                    }, {
                        name: "Pastel2",
                        imglink: "/static/colormap/Pastel2.png"
                    }, {
                        name: "Set3",
                        imglink: "/static/colormap/Set3.png"
                    }, {
                        name: "Paired",
                        imglink: "/static/colormap/Paired.png"
                    }, {
                        name: "OrRd",
                        imglink: "/static/colormap/OrRd.png"
                    }, {
                        name: "PRGn",
                        imglink: "/static/colormap/PRGn.png"
                    }, {
                        name: "BuGn",
                        imglink: "/static/colormap/BuGn.png"
                    }, {
                        name: "BuPu",
                        imglink: "/static/colormap/BuPu.png"
                    }, {
                        name: "RdYlBu",
                        imglink: "/static/colormap/RdYlBu.png"
                    }, {
                        name: "PuBuGn",
                        imglink: "/static/colormap/PuBuGn.png"
                    }, {
                        name: "Spectral",
                        imglink: "/static/colormap/Spectral.png"
                    },
                ],
                radio: "singleColor",
                tabPaneArray: [{
                    name: "layer1",
                    label: "dili",
                    data: {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }
                }],
                visi2: false,
                layerInfo: {
                    data: []
                },
            }
        },
        created() {
            this.$Bus.$on("serviceAdding", res => {
                let that = this;
                if (res !== undefined) {
                    if (res.styleInfo !== null && res.styleInfo !== "") {
                        //that.layerInfo.data.unshift(JSON.parse(res.styleInfo));
                        that.layerInfo.data.unshift({
                            layerId: res.id,
                            layerName: res.name,
                            layerType: res.featureType,
                            layerUrl: res.url,
                            layerBounds: res.extent,
                            field: "",
                            fields: "",
                            field2: "",
                            fieldArr: "",
                            fieldType: "",
                            layerStyle: {
                                rasterOpacity: "",
                                visibility: "visible",
                            },
                            styleShow: false,
                            ifShow: true,
                            attr: [{
                                date: '2016-05-02',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄'
                            }],
                        });
                        if (res.featureType === "raster") {
                            global.map.addLayer({
                                'id': res.id,
                                'type': res.featureType,
                                "source": {
                                    "type": res.featureType,
                                    "tiles": [res.url],
                                    "tileSize": 256,
                                    "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                                }
                            });
                        } else if (res.featureType === "polygon") {
                            that.layerInfo.data.unshift(JSON.parse(res.styleInfo));
                            global.map.addLayer({
                                "id": res.id,
                                "type": "fill",
                                "source": {
                                    "type": "vector",
                                    "scheme": "tms",
                                    "tiles": [res.url],
                                },
                                "source-layer": res.name,//必须是url定义的layer名
                                "paint": {
                                    "fill-color": JSON.parse(res.styleInfo).layerStyle.fillColor,
                                    "fill-opacity": JSON.parse(res.styleInfo).layerStyle.fillOpacity / 100,
                                    'fill-outline-color': JSON.parse(res.styleInfo).layerStyle.outlineColor
                                }
                            });
                        } else if (res.featureType === "line") {
                            global.map.addLayer({
                                "id": res.id,
                                "type": "line",
                                "source": {
                                    "type": "vector",
                                    "scheme": "tms",
                                    "tiles": [res.url],
                                },
                                "source-layer": res.name,//必须是url定义的layer名
                                "paint": {
                                    "line-color": JSON.parse(res.styleInfo).layerStyle.lineColor,
                                    "line-width": JSON.parse(res.styleInfo).layerStyle.lineWidth,
                                    "line-opacity": JSON.parse(res.styleInfo).layerStyle.fillOpacity / 100,
                                }
                            });
                        } else if (res.featureType === "point") {
                            global.map.addLayer({
                                "id": res.id,
                                "type": "circle",
                                "source": {
                                    "type": "vector",
                                    "scheme": "tms",
                                    "tiles": [res.url],
                                },
                                "source-layer": res.name,//必须是url定义的layer名
                                "paint": {
                                    "circle-color": JSON.parse(res.styleInfo).layerStyle.circleColor,
                                    "circle-radius": JSON.parse(res.styleInfo).layerStyle.circleRadius,
                                    "circle-opacity": JSON.parse(res.styleInfo).layerStyle.fillOpacity / 100,
                                }
                            });
                        }
                        let mapServiceVisible = {
                            visible: false,
                        };
                        that.$Bus.$emit("addLayerSuccess", mapServiceVisible);
                    } else {
                        if (res.featureType === "raster") {
                            that.layerInfo.data.unshift({
                                layerId: res.id,
                                layerName: res.name,
                                layerType: res.featureType,
                                layerUrl: res.url,
                                layerBounds: res.extent,
                                field: "",
                                fields: "",
                                field2: "",
                                fieldArr: "",
                                fieldType: "",
                                layerStyle: {
                                    rasterOpacity: "",
                                    visibility: "visible",
                                },
                                styleShow: false,
                                ifShow: true,
                                attr: [{
                                    date: '2016-05-02',
                                    name: '王小虎',
                                    address: '上海市普陀区金沙江路 1518 弄'
                                }],
                            });
                            global.map.addLayer({
                                'id': res.id,
                                'type': res.featureType,
                                "source": {
                                    "type": res.featureType,
                                    "tiles": [res.url],
                                    "tileSize": 256,
                                    "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                                }
                            });
                            let mapServiceVisible = {
                                visible: false,
                            };
                            that.$Bus.$emit("addLayerSuccess", mapServiceVisible);
                        } else if (res.featureType === "polygon") {
                            that.layerInfo.data.unshift({
                                layerId: res.id,
                                layerName: res.name,
                                layerType: res.featureType,
                                layerUrl: res.url,
                                layerBounds: util.formatXY(res.extent),
                                field: "",
                                field2: "",
                                fields: JSON.parse(res.fieldInfo),
                                fieldType: "",
                                layerStyle: {
                                    colormap: "",
                                    colormap2: "",
                                    classNum: "",
                                    fillColor: "",
                                    fillOpacity: "",
                                    outlineColor: "",
                                    label: "",
                                    legendShow: false,
                                    legendName: res.name,
                                    legendValue: [],
                                    visibility: "visible",
                                },
                                styleShow: false,
                                ifShow: true,
                                attr: [{
                                    date: '2016-05-02',
                                    name: '王小虎',
                                    address: '上海市普陀区金沙江路 1518 弄'
                                }],
                            });
                            global.map.addLayer({
                                "id": res.id,
                                "type": "fill",
                                "source": {
                                    "type": "vector",
                                    "scheme": "tms",
                                    "tiles": [res.url],
                                },
                                "source-layer": res.name,//必须是url定义的layer名
                                "paint": {
                                    "fill-color": "rgba(200, 100, 240, 0.8)",
                                    'fill-outline-color': "rgba(200, 100, 240, 1)"
                                }
                            });
                            let mapServiceVisible = {
                                visible: false,
                            };
                            that.$Bus.$emit("addLayerSuccess", mapServiceVisible);
                        } else if (res.featureType === "line") {
                            that.layerInfo.data.unshift({
                                layerId: res.id,
                                layerName: res.name,
                                layerType: res.featureType,
                                layerUrl: res.url,
                                layerBounds: util.formatXY(res.extent),
                                field: "",
                                field2: "",
                                fields: JSON.parse(res.fieldInfo),
                                fieldType: "",
                                layerStyle: {
                                    colormap: "",
                                    colormap2: "",
                                    classNum: "",
                                    lineColor: "",
                                    lineWidth: "",
                                    fillOpacity: "",
                                    label: "",
                                    legendShow: false,
                                    legendName: res.name,
                                    legendValue: [],
                                    visibility: "visible",
                                },
                                styleShow: false,
                                ifShow: true,
                                attr: [{
                                    date: '2016-05-02',
                                    name: '王小虎',
                                    address: '上海市普陀区金沙江路 1518 弄'
                                }],
                            });
                            global.map.addLayer({
                                "id": res.id,
                                "type": "line",
                                "source": {
                                    "type": "vector",
                                    "scheme": "tms",
                                    "tiles": [res.url],
                                },
                                "source-layer": res.name,//必须是url定义的layer名
                                "paint": {
                                    "line-color": "rgba(200, 100, 240, 1)",
                                    "line-width": 3
                                }
                            });
                            let mapServiceVisible = {
                                visible: false,
                            };
                            that.$Bus.$emit("addLayerSuccess", mapServiceVisible);
                        } else if (res.featureType === "point") {
                            that.layerInfo.data.unshift({
                                layerId: res.id,
                                layerName: res.name,
                                layerType: res.featureType,
                                layerUrl: res.url,
                                layerBounds: util.formatXY(res.extent),
                                field: "",
                                field2: "",
                                fields: JSON.parse(res.fieldInfo),
                                fieldType: "",
                                layerStyle: {
                                    colormap: "",
                                    colormap2: "",
                                    classNum: "",
                                    circleColor: "",
                                    circleRadius: "",
                                    fillOpacity: "",
                                    label: "",
                                    legendShow: false,
                                    legendName: res.name,
                                    legendValue: [],
                                    visibility: "visible",
                                },
                                styleShow: false,
                                ifShow: true,
                                attr: [{
                                    date: '2016-05-02',
                                    name: '王小虎',
                                    address: '上海市普陀区金沙江路 1518 弄'
                                }],
                            });
                            global.map.addLayer({
                                "id": res.id,
                                "type": "circle",
                                "source": {
                                    "type": "vector",
                                    "scheme": "tms",
                                    "tiles": [res.url],
                                },
                                "source-layer": res.name,//必须是url定义的layer名
                                "paint": {
                                    "circle-color": "rgba(200, 100, 240, 0.8)",
                                    "circle-radius": 3
                                }
                            });
                            let mapServiceVisible = {
                                visible: false,
                            };
                            that.$Bus.$emit("addLayerSuccess", mapServiceVisible);
                        }
                    }
                }
            });
        },
        methods: {
            addLayer() {
                let mapServiceVisible = {
                    visible: true,
                };
                this.$Bus.$emit("mapServiceVisible", mapServiceVisible);
            },
            showStyle(index) {
                if (this.layerInfo.data[index].styleShow)
                    this.layerInfo.data[index].styleShow = false;
                else
                    this.layerInfo.data[index].styleShow = true;
            },
            changeFillColor(item) {
                global.map.setPaintProperty(item.layerId, 'fill-color', item.layerStyle.fillColor);
                let legendValue = [];
                let legendSingle = {
                    "name": item.layerName,
                    "color": item.layerStyle.fillColor
                };
                legendValue.push(legendSingle);
                var index = this.layerInfo.data.indexOf(item);
                this.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },
            changeFillOpacity(item) {
                if (item.layerType === "polygon")
                    global.map.setPaintProperty(item.layerId, 'fill-opacity', item.layerStyle.fillOpacity / 100);
                else if (item.layerType === "line")
                    global.map.setPaintProperty(item.layerId, 'line-opacity', item.layerStyle.fillOpacity / 100);
                else if (item.layerType === "point")
                    global.map.setPaintProperty(item.layerId, 'circle-opacity', item.layerStyle.fillOpacity / 100);
            },
            changeOutlineColor(item) {
                global.map.setPaintProperty(item.layerId, 'fill-outline-color', item.layerStyle.outlineColor);
            },
            changeLineColor(item) {
                global.map.setPaintProperty(item.layerId, 'line-color', item.layerStyle.lineColor);
                let legendValue = [];
                let legendSingle = {
                    "name": item.layerName,
                    "color": item.layerStyle.lineColor
                };
                legendValue.push(legendSingle);
                var index = this.layerInfo.data.indexOf(item);
                this.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },
            changeLineWidth(item) {
                global.map.setPaintProperty(item.layerId, 'line-width', item.layerStyle.lineWidth);
            },
            changePointColor(item) {
                global.map.setPaintProperty(item.layerId, 'circle-color', item.layerStyle.circleColor);
                let legendValue = [];
                let legendSingle = {
                    "name": item.layerName,
                    "color": item.layerStyle.circleColor
                };
                legendValue.push(legendSingle);
                var index = this.layerInfo.data.indexOf(item);
                this.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },
            changePointRadius(item) {
                global.map.setPaintProperty(item.layerId, 'circle-radius', item.layerStyle.circleRadius);
            },
            fitArea(item) {
                global.map.fitBounds(item.layerBounds);
            },
            saveLayerInfo() {
                localStorage.setItem("layerInfo", JSON.stringify(this.layerInfo));
                if (this.layerInfo.data.length > 0) {
                    let indicator = 0;
                    this.layerInfo.data.forEach((item, index) => {
                        let searchParams = {
                            id: this.layerInfo.data[index].layerId,
                            styleInfo: JSON.stringify(this.layerInfo.data[index])
                        };
                        requestUpdate(searchParams).then(res=> {
                            let {message,code, body} = res.data;
                            if (code !=200) {
                                indicator = 1;
                                this.$message({
                                    message: this.layerInfo.data[index].layerName + '样式保存失败！' + message,
                                    type: 'error'
                                });
                            }
                        });
                    });
                    let that=this;
                    setTimeout(function () {
                        if(indicator==0){
                            that.$message({
                                message:'样式保存成功！'
                            });
                        }
                    }, 1000);
                }
            },
            deleteLayer(item) {
                var index = this.layerInfo.data.indexOf(item);
                if (index !== -1) {
                    this.layerInfo.data.splice(index, 1);
                    global.map.removeLayer(item.layerId);
                    global.map.removeSource(item.layerId);
                }
            },
            layerIfShow(item) {
                var index = this.layerInfo.data.indexOf(item);
                if (item.ifShow) {
                    global.map.setLayoutProperty(item.layerId, 'visibility', 'visible');
                    this.layerInfo.data[index].layerStyle.visibility = "visible";
                } else {
                    global.map.setLayoutProperty(item.layerId, 'visibility', 'none');
                    this.layerInfo.data[index].layerStyle.visibility = "none";
                }
            },
            legendIfShow(item) {
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },
            changeLegendName(item) {
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },
            upClass(item) {
                var index = this.layerInfo.data.indexOf(item);
                if (index !== -1) {
                    global.map.moveLayer(this.layerInfo.data[index - 1].layerId, this.layerInfo.data[index].layerId);
                    this.layerInfo.data[index] = this.layerInfo.data.splice(index - 1, 1, this.layerInfo.data[index])[0];
                }
            },
            downClass(item) {
                var index = this.layerInfo.data.indexOf(item);
                if (index !== -1) {
                    global.map.moveLayer(this.layerInfo.data[index].layerId, this.layerInfo.data[index + 1].layerId);
                    this.layerInfo.data[index] = this.layerInfo.data.splice(index + 1, 1, this.layerInfo.data[index])[0];
                }
            },
            showAttibute(item) {
                let attrData = {
                    visible: true,
                    tableData: item.attr,
                };
                this.$Bus.$emit("attrData", attrData);

                //根据index去读取放在tab里面的内容
                // push进tabPaneArray
            },
            showMapData(item) {
                let vis = {

                    visible: true,
                    id2: "10001",
                    id3: "10002",
                    id4: "10003"
                }
                this.$Bus.$emit("vis", vis);


                //根据index去读取放在tab里面的内容
                // push进tabPaneArray
            },
            chooseAttr(index, layerId, field) {
                let searchParams = {
                    serviceID: layerId,
                    fieldName: field
                };
                requestSearchField(searchParams).then(res => {
                    let {message, code, body} = res.data;
                    if (code !== 200) {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        if (body.result.length > 0) {
                            //var index = this.layerInfo.data.indexOf(item);
                            this.layerInfo.data[index].fieldArr = body.result[0].fieldValue;
                            this.layerInfo.data[index].fieldType = body.result[0].fieldType;
                            this.reRender(this.layerInfo.data[index]);
                        }
                    }
                });
            },
            reRender(item) {
                let fieldArr = item.fieldArr.split(",").map(Number).sort((a, b) => a - b);
                let min = Number(fieldArr[0]);
                let max = Number(fieldArr[fieldArr.length - 1]);
                let Arr = null;
                Arr = this.equalInterval(min, max, item.layerStyle.classNum + 1);
                let normArr;
                normArr = Arr.map(ele => (ele - min) / (max - min));
                let colorArr = [];
                switch (item.layerStyle.colormap) {
                    case "Reds":
                        colorArr = normArr.map(ele => d3.interpolateReds(ele));
                        break;
                    case "Oranges":
                        colorArr = normArr.map(ele => d3.interpolateOranges(ele));
                        break;
                    case "Greens":
                        colorArr = normArr.map(ele => d3.interpolateGreens(ele));
                        break;
                    case "Greys":
                        colorArr = normArr.map(ele => d3.interpolateGreys(ele));
                        break;
                    case "Blues":
                        colorArr = normArr.map(ele => d3.interpolateBlues(ele));
                        break;
                    case "Purples":
                        colorArr = normArr.map(ele => d3.interpolatePurples(ele));
                        break;
                }
                let valueArr;
                let legendValue = [];
                valueArr = this.equalInterval(min, max, item.layerStyle.classNum);
                valueArr.unshift(min);
                valueArr.push(max);
                let colorSubsection = [
                    'step',
                    ['get', item.field],
                ];
                for (var i = 0; i < valueArr.length - 1; i++) {
                    colorSubsection.push(colorArr[i]);
                    colorSubsection.push(valueArr[i + 1]);
                    let legendSingle = {
                        "name": valueArr[i].toFixed(6) + "-" + valueArr[i + 1].toFixed(6),
                        "color": colorArr[i]
                    };
                    legendValue.push(legendSingle)
                }
                colorSubsection.push(colorArr[colorArr.length - 1]);
                if (item.layerType === "polygon") {
                    global.map.setPaintProperty(item.layerId, 'fill-color', colorSubsection);
                    item.layerStyle.fillColor = colorSubsection;
                } else if (item.layerType === "line") {
                    global.map.setPaintProperty(item.layerId, 'line-color', colorSubsection);
                    item.layerStyle.lineColor = colorSubsection;
                } else if (item.layerType === "point") {
                    global.map.setPaintProperty(item.layerId, 'circle-color', colorSubsection);
                    item.layerStyle.circleColor = colorSubsection;
                }

                var index = this.layerInfo.data.indexOf(item);
                this.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },
            equalInterval(min, max, classNum) {
                let inter = (max - min) / classNum;
                let dataArr = [];
                for (let i = 1; i < classNum; i++) {
                    let val = min + i * inter;
                    dataArr.push(val);
                }
                return dataArr;
            },
            reRenderSingle(item) {
                let valueArr = item.fieldArr.split(",");
                let normArr = null;
                normArr = this.equalInterval(0, 1, valueArr.length + 1);
                let colorArr = [];
                switch (item.layerStyle.colormap2) {
                    case "OrRd":
                        colorArr = normArr.map(ele => d3.interpolateOrRd(ele));
                        break;
                    case "PRGn":
                        colorArr = normArr.map(ele => d3.interpolatePRGn(ele));
                        break;
                    case "BuGn":
                        colorArr = normArr.map(ele => d3.interpolateBuGn(ele));
                        break;
                    case "BuPu":
                        colorArr = normArr.map(ele => d3.interpolateBuPu(ele));
                        break;
                    case "RdYlBu":
                        colorArr = normArr.map(ele => d3.interpolateRdYlBu(ele));
                        break;
                    case "PuBuGn":
                        colorArr = normArr.map(ele => d3.interpolatePuBuGn(ele));
                        break;
                    case "Spectral":
                        colorArr = normArr.map(ele => d3.interpolateSpectral(ele));
                        break;
                    case "Paired":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemePaired[Math.floor(ele * 12)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                    case "Pastel1":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemePastel1[Math.floor(ele * 9)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                    case "Pastel2":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemePastel2[Math.floor(ele * 8)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                    case "Set3":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemeSet3[Math.floor(ele * 12)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                }
                let stops = [];
                let legendValue = [];
                for (var i = 0; i < valueArr.length; i++) {
                    if (item.fieldType === "string")
                        stops.push([valueArr[i], colorArr[i]]);
                    else
                        stops.push([Number(valueArr[i]), colorArr[i]]);
                    let legendSingle = {
                        "name": valueArr[i],
                        "color": colorArr[i]
                    };
                    legendValue.push(legendSingle)
                }
                let colorSingleValue = {
                    "property": item.field2,
                    "type": "categorical",
                    "stops": stops
                };
                if (item.layerType === "polygon"){
                    global.map.setPaintProperty(item.layerId, 'fill-color', colorSingleValue);
                    item.layerStyle.fillColor = colorSingleValue;
                } else if (item.layerType === "line") {
                    global.map.setPaintProperty(item.layerId, 'line-color', colorSingleValue);
                    item.layerStyle.lineColor = colorSingleValue;
                } else if (item.layerType === "point") {
                    global.map.setPaintProperty(item.layerId, 'circle-color', colorSingleValue);
                    item.layerStyle.circleColor = colorSingleValue;
                }

                var index = this.layerInfo.data.indexOf(item);
                this.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            },

        },
    }
</script>

<style>

    .qian {
        padding-left: 5px;
        border-left: 5px solid #3a8ee6;
        margin-bottom: 10px;
        margin-left: 10px;
    }

    .biao {
        padding-left: 20px;
        text-align: center;
    }

    div::-webkit-scrollbar {
        width: 0;
    }

    .icon {
        float: right;
        margin: 12px 2px;
    }

</style>